
<template>
  <div style="display: flex; justify-content: center; align-items: center;width: 100%; height: 100%; background: #06b6d4;">
<div id="phaser-game-container" style="width: 65%; height: 90%; "></div>
  </div>
</template>
<script lang="ts">
/// <reference path="phaser.d.ts" />
import Phaser from 'phaser';
export default{
    mounted() {
        const container = document.getElementById('phaser-game-container');

        const config = {
            type: Phaser.AUTO,
            parent: 'phaser-game-container',
            width:1000,
            height:container.offsetHeight,

            scene:scene2
        };
      // eslint-disable-next-line no-unused-vars
        const game = new Phaser.Game(config);
    }
}

class scene2 extends Phaser.Scene {
  background;
  preload() {
        this.load.image('bg','https://dmsgame.obs.cn-south-1.myhuaweicloud.com/phaser%E7%B4%A0%E6%9D%90/%E9%9F%B3%E4%B9%90%E5%B0%8F%E7%8B%97/%E8%83%8C%E6%99%AF/%E7%BA%BF%E6%9D%A1%E5%B0%8F%E7%8B%97%E8%83%8C%E6%99%AF.jpg')


  }

  create() {
         this.add.image(0,0,'bg').setOrigin(0,0);


  }
update() {


}
}
</script>
<style scoped>
*{
  padding: 0;
  margin: 0;
}
</style>
